<template>
    <a-modal v-model:visible="modalInfo.visible" width="60%" :title="modalInfo.title" :mask-closable="false"
        @ok="submit" :hide-cancel="true">
        <a-spin :loading="modalInfo.loading" tip="加载中，请稍后···">
            <div class="" v-if="tableData && tableData.length > 0">
                <!-- <a-collapse :default-active-key="[0]" style="width: 760px;height:500px;overflow-y: scroll;"
                    :bordered="false">
                    <div v-for="(item, index) in tableData" :key="item.logs">
                        <a-collapse-item :header="item.date" :key="index">
                            <div v-for="(log, logIndex) in item.logs" :key="log.id">
                                <div> <span class="txt">{{ '【 ' + log.time_text + ' 】' }}</span> <span class="msg">{{
                                        log.api_name }}</span></div>
                            </div>
                        </a-collapse-item>
                    </div>
                </a-collapse> -->
                <a-timeline v-for="(itm,idx) in  tableData" :key="idx" >
                    <a-timeline-item  :label="itm.create_time" lineType="dashed">
                        {{ itm.content }}
                    </a-timeline-item>
                </a-timeline>
            </div>
            <div v-else style="width: 760px;text-align: center;font-size: 18px;line-height: 180px;">暂无推送记录</div>
        </a-spin>
    </a-modal>
</template>

<script setup>
import { onMounted, ref, reactive, computed } from 'vue'
import AsApi from '@/api/system/afterSale'
const modalInfo = ref({
    visible: false,
    title: '',
    loading: false
})
const searchForm = ref({
    date: '',
    keyword: '',
    admin_id: ''
})
const open = async (data) => {
    modalInfo.value.loading = true
    modalInfo.value.title =  '物流轨迹'
    modalInfo.value.visible = true
    searchForm.value.admin_id = data.id
    await initPage(data.id)
}
const tableData = ref([])
const indexList = ref([])
const initPage = async (id) => {
    indexList.value = []
    const { data } = await AsApi.aftersale_output_express_line({page:1,limit:100,table_id:id})
    // const arrayData = Object.entries(data).map(([date, logs], index) => {
    //     indexList.value.push(Number(index));
    //     return { date, logs };
    // });
    modalInfo.value.loading = false
    tableData.value = data.data
}
const submit = () => {
    modalInfo.value.visible = false
}
onMounted(async () => {
    // initPage()
})
defineExpose({ open })
</script>

<style scoped lang="less">
 ::v-deep(.arco-timeline-item.arco-timeline-item-last > .arco-timeline-item-dot-wrapper .arco-timeline-item-dot-line) {
  display: block !important;
}
:deep(.arco-collapse-item-header-title) {
    font-size: 23px !important;
    line-height: 30px;
    color: orangered;
}

.txt {
    color: #80aba9;
}

.msg {
    margin-left: 20px;
    font-size: 16px;
    line-height: 40px;
}
</style>